<template>
  <div class="echarts" ref="chartRef"></div>
</template>

<script setup>
import { getBusinessCount } from "@/api/statusData";
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref, nextTick } from "vue";

const data = ref(null);

const chartRef = ref(null);
let myChart = null;

const initChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      
    },
    grid: {
      top: 10,
      bottom: 30,
      left: 50,
      right: 20
    },
    xAxis: {
      data: rdata.cate,
      axisLabel: {
        interval: 0,
        rotate: 15,
        fontSize: 12,
        formatter: function (value) {
          if (value.length > 4) {
            return value.substring(0, 4) + '...';
          }
          return value;
        }
      },
      axisTick: {
        alignWithLabel: true
      },
      boundaryGap: false,
    },
    yAxis: {
      show: true,
      type: "value",
      name: "数量",
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
          opacity: 0.5
        }
      }
    },
    series: [
      {
        data: rdata.value,
        type: "line",
        smooth: true,
        showSymbol: true,
        symbolSize: 8,
        itemStyle: {
          color: '#FC2525'
        },
        lineStyle: {
          width: 3,
          color: '#FC2525'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              {
                offset: 0,
                color: 'rgba(255,77,79,0.5)'
              },
              {
                offset: 1,
                color: 'rgba(255,77,79,0)'
              }
            ]
          )
        },
      }
    ],
  };

  myChart = echarts.init(chartRef.value);
  myChart.setOption(option);
};

// 记录当前显示的最后一个元素在data中的索引
let currentIndex = 4;

// 得到data里的前5个数据
const rdata = {
  cate: [],
  value: []
}

// 获取前5个数据
const getRdata = () => {
  if (data.value && data.value.cate) {
    rdata.cate = data.value.cate.slice(0, 5);
    rdata.value = data.value.value.slice(0, 5);
  }
}

function updateData() {
  if (!data.value || !data.value.cate || !myChart) return;

  try {
    // 移除第一项
    rdata.cate.shift();
    rdata.value.shift();

    // 更新currentIndex，如果到达data的末尾则重置为0
    currentIndex = (currentIndex + 1) % data.value.cate.length;

    // 添加data中的下一项到末尾
    rdata.cate.push(data.value.cate[currentIndex]);
    rdata.value.push(data.value.value[currentIndex]);

    // 使用 nextTick 确保 DOM 更新后再更新图表
    nextTick(() => {
      myChart.setOption({
        xAxis: {
          data: rdata.cate
        },
        series: [
          {
            data: rdata.value
          }
        ]
      });
    });
  } catch (error) {
    console.error('更新图表时出错:', error);
  }
}

onMounted(async () => {
  const res = await getBusinessCount();
  data.value = res.data;
  getRdata();
  initChart();

  setInterval(() => {
    updateData()
  }, 4000);
});

onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
